<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="header">
          <div class="logo">
            <img src="../assets/images/home/logo-white.png" alt="">
          </div>
          <div class="nav">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-menu-item index="/home/index" style="color: white;">首页</el-menu-item>
              <el-menu-item index="/home/test" style="color: white;">考试</el-menu-item>
              <el-menu-item index="/wrong" style="color: white;">错题本</el-menu-item>
              <el-menu-item index="/collection" style="color: white;" >收藏夹</el-menu-item>
            </el-menu>
          </div>
          <div class="login" v-if="loginAfter">
            <div>登录</div>
            <div class="line">|</div>
            <div>注册</div>
          </div>
          <div class="login-after" v-else>
            <div class="avatar">
              <img :src="avatar" alt="">
            </div>
            <div class="name">
              <div class="dialog">
                <el-dropdown @command="handleCommand">
                  <div style="font-size: 13px;width:60px;color:aliceblue">
                    {{ name }}
                  </div>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="change">修改资料</el-dropdown-item>
                    <el-dropdown-item command="rank">排行榜</el-dropdown-item>
                    <el-dropdown-item command="out">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>
        Copyright &copy; 2021 成都蜗牛创想科技有限公司
      </el-footer>
    </el-container>
    <!-- 修改资料dialog -->
    <div class="change-dialog" style="width:300px">
      <el-dialog title="修改资料" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <div>
            <el-form-item>
              <div class="block" v-for="fit in fits" :key="fit">
                <!-- <span class="demonstration">{{ fit }}</span> -->
                <el-image style="width: 120px; height: 120px;" :src="url" :fit="fit"></el-image>
                <div style="width: 120px; height: 20px;text-align:center">{{ name }}</div>
              </div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="手机号:" style="width: 220px;height: 50px;">
              <span><el-input v-model="form.phone" autocomplete="off"></el-input></span>
            </el-form-item>
            <el-form-item label="姓名:" style="width: 220px;height: 50px;">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别:" style="width: 220px;height: 50px;">
              <el-input v-model="form.gender" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门" style="width: 220px;">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="部门1" value="shanghai"></el-option>
                <el-option label="部门2" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 排行榜dialog -->
    <el-dialog :visible.sync="dialogTableVisible">
      <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="date" label="名次" width="180">
        </el-table-column>
        <el-table-column prop="exam" label="考试" width="180">
        </el-table-column>
        <el-table-column prop="grade" label="成绩">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      loginAfter: false,
      name: "",
      avatar: "",
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      tableData: [{
        date: '1',
        exam: '第一周考',
        grade: '98',
      },
      {
        date: '2',
        exam: '第一阶段阶段考试',
        grade: '94',
      },
      {
        date: '3',
        exam: '第三周考',
        grade: '87',
      },
      {
        date: '4',
        exam: '第四周考',
        grade: '78',
      },
      {
        date: '5',
        exam: '第四周考',
        grade: '76',
      },
      {
        date: '6',
        exam: '第四周考',
        grade: ' 72',
      },
      {
        date: '7',
        exam: '第四周考',
        grade: ' 72',
      },
      {
        date: '8',
        exam: '第四周考',
        grade: '72',
      },
      {
        date: '9',
        exam: '第四周考',
        grade: '65',
      },
      {
        date: '10',
        exam: '第四周考',
        grade: '65',
      },
    ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        gender: '',
        phone: '',
      },
      formLabelWidth: '100px',
      fits: ['fill'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$router.push({
                    path: `${keyPath}`
                })
    },
    handleCommand(command) {
      // this.changeMessage = true;
      if (command == "change") {
        //修改资料
        this.dialogFormVisible = true;
      } else if (command == "rank") {
        //排行榜
        this.dialogTableVisible = true;
      } else {
        //退出登录   1.清除本地存储2.跳转登录页面
        this.$router.push("/login");
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }

  },
  async created() {

    const token = localStorage.getItem("token");
    console.log("token", token);
    if (token) {
      //用户已登录
      this.loginAfter = false;

    } else {
      this.loginAfter = true;
    }
    //获取用户信息
    const res = await this.$api.student.getStudentApi({});
    localStorage.userInfo = JSON.stringify(res.data);
    this.avatar = res.data.avatar;
    this.name = res.data.name;
    // localStorage.setItem("userInfo");
    console.log("res", res);
  },
}
</script>
<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #69b0f6e4;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-header {
  height: 60px;
  background-color: #6966eb;
  box-shadow: 0px 0px 10px 0px rgba(174, 174, 174, 0.44);
}

.el-dialog__body {
  width: 500px;
}

.el-main {
  color: #333;
  text-align: center;
  padding: 0px;
}

.el-footer {
  background-color: #726fff;
  height: 48px;
  font-size: 13px;
  line-height: 48px;
  color: #ffffff;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.header {
  width: 1000px;
  height: 100%;
  margin: auto;
  display: flex;

  .logo {
    width: 200px;
    height: 45px;
    margin-top: 4px;

    img {
      width: 100%;
      height: 100%;

    }
  }

  .nav {
    margin-left: 120px;
    height: 43px;
    background-color: #6966eb;

    .el-menu {
      background-color: #6966eb;
      color: #ffffff;

      :hover {
        background-color: #7472e9;
      }

    }
  }

  .login {
    display: flex;
    color: #ffffff;
    font-size: 13px;
    width: 100px;
    margin-left: 270px;

    .line {
      margin-left: 10px;
      margin-right: 10px;
    }
  }

  .login-after {
    width: 120px;
    margin-left: 200px;
    display: flex;

    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-top: 10px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .name {
      width: 40px;
    }
  }

  .change-dialog {
    width: 500px;
    display: flex;
  }
}
</style>
